<template>
  <el-row class="top">
    <el-col :span="24"></el-col>
  </el-row>
  <el-row>
    <el-col :span="1" class="fenge"></el-col>
    <el-col :span="10" class="left">
      <div class="title">个人信息</div>
      <hr />
      <div class="title-tian"></div>
      <div class="content">
        <img src="@/assets/img/lol.jpg" alt="" />
        <div class="content1">admin</div>
        <div class="content2">这个人很懒，什么都没留</div>
      </div>
    </el-col>
    <el-col :span="2" class="fenge"></el-col>
    <el-col :span="10" class="right">
      <div class="title">账户编辑</div>
      <hr />
      <div class="content3">
        <el-form :model="form" label-width="120px">
          <el-col :span="20">
            <el-form-item label="用户名："> admin</el-form-item>
            <el-form-item label="旧密码：">
              <el-input v-model="form.password" />
            </el-form-item>
            <el-form-item label="新密码：">
              <el-input v-model="form.password1" />
            </el-form-item>
            <el-form-item label="个人简介：">
              <el-input placeholder="哈哈哈哈哈" />
            </el-form-item>
          </el-col>
          <el-form-item>
            <el-button type="primary" :plain="true" @click="onSubmit"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>

      <div class="content"></div>
    </el-col>
    <el-col :span="1" class="fenge"></el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import { modifyApi } from "@/api/api";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ElNotification } from "element-plus";
import { h } from "vue";
const router = useRouter();
const activeName = ref<string>("");
const handleClick = () => {};
const form = reactive({
  password: "",
  password1: "",
});
const onSubmit = async () => {
  const data = await modifyApi(form);
  console.log(data);
  if (data.data === "0") {
    ElNotification({
      title: "Title",
      message: h("i", { style: "color: #f89898" }, "旧密码不正确"),
    });
    console.log("旧密码不正确");
  } else {
    ElMessage({
      message: "密码修改成功",
      type: "success",
    });
    router.push("/login");
  }
};
</script>
<style lang="less" scoped>
.top {
  background-color: #f5f5f5;
  height: 20px;
}
.title-tian {
  height: 50px;
}
.fenge {
  background-color: #f5f5f5;
}
.title {
  font-size: 24px;
  padding: 10px;
}
.content {
  // height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .content1 {
    font-size: 20px;
    margin-top: 10px;
  }
  .content2 {
    font-size: 16px;
    margin-top: 10px;
  }
}
.content3 {
  // font-size: 16px;
  margin-top: 20px;
}
.left img {
  border-radius: 100%;
  height: 100px;
  width: 100px;
}
</style>
